<template>
<div id="mine">
  <el-card>
    <div slot="header">
      <span>个人中心</span>
    </div>
    <div style="margin-bottom:50px;width:60%;float:right;margin-left:25px;" class="userstext">
      <el-form ref="formLogin" label-position="left" :model="formUsersData" :rules="rules" :data="userData" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formUsersData.username" @input="showbtn"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formUsersData.email" @input="showbtn"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="formUsersData.phone" @input="showbtn"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="save hidden" @click="menusEdit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <div slot="header">
        <span>头像管理</span>
      </div>
      <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-card>

  </el-card>

</div>
</template>

<script>
import $ from 'jquery';
export default {
  data() {
    let validUsername = (rule, value, callback) => {
      let regx = /^[a-zA-Z]\w{3,17}$/
      if (!regx.test(value)) {
        callback(new Error('用户名非法'))
      } else {
        callback()
      }
    }
    let validEmail = (rule, value, callback) => {
      let regx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!regx.test(value)) {
        callback(new Error('邮箱非法'))
      } else {
        callback()
      }
    }
    let validPhone = (rule, value, callback) => {
      let regx = /^1[34578]\d{9}$/
      if (!regx.test(value)) {
        callback(new Error('手机号码错误'))
      } else {
        callback()
      }
    }
    let isexistname = (rule, value, callback) => {
      this.$http.get(`/users/isexist?fieldname=username&fieldvalue=${value}`).then(result => {
        if (result.data.error == 1 && value !== this.oldvalue.username) {
          callback(new Error('用户名已存在'))
        } else {
          callback()
        }
      })
    }
    let isexistphone = (rule, value, callback) => {
      this.$http.get(`/users/isexist?fieldname=phone&fieldvalue=${value}`).then(result => {
        if (result.data.error == 1 && value !== this.oldvalue.phone) {
          callback(new Error('手机号码已存在'))
        } else {
          callback()
        }
      })
    }
    let isexistemail = (rule, value, callback) => {
      this.$http.get(`/users/isexist?fieldname=email&fieldvalue=${value}`).then(result => {
        if (result.data.error == 1 && value !== this.oldvalue.email) {
          callback(new Error('邮箱已存在'))
        } else {
          callback()
        }
      })
    }
    return {
      oldvalue: {},
      fileList: [],
      userData: [],
      formUsersData: {
        username: '',
        email: '',
        phone: '',
      },
      rules: {
        username: [{
            validator: validUsername,
            trigger: 'change'
          },
          {
            validator: isexistname,
            trigger: "change"
          }
        ],
        email: [{
          validator: validEmail,
          trigger: 'change'
        }, {
          validator: isexistemail,
          trigger: "change"
        }],
        phone: [{
          validator: validPhone,
          trigger: 'change'
        }, {
          validator: isexistphone,
          trigger: "change"
        }],
      },
    };
  },
  created() {
    this.lgusm();
  },
  methods: {
    showbtn() {
      this.$refs.formLogin.validate(pass => {
        if (pass) {
          $('.save').removeClass('hidden')
        }else{
           $('.save').addClass('hidden')
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    menusEdit() {
      this.$refs.formLogin.validate(valid => {
        if (!valid) {
          return;
        }
        this.$http
          .post("/users/edit", this.$qs.stringify(this.formUsersData))
          .then(result => {
            location.reload()
            this.lgusm();
          });
      });
    },
    lgusm() {
      this.$http.post('/users/one').then(result => {
        this.formUsersData = result.data.data;
        this.oldvalue = this.formUsersData;
      })
    },

  }
}
</script>

<style>
.hidden {
  display: none;
}
</style>
